<template>
  <div class="album-list">
    <!-- 使用 AlbumItem 组件 -->
    <AlbumItem v-for="album in albums" :key="album.id" :album="album" />
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import AlbumItem from './AlbumItem.vue'; // 引入 AlbumItem 组件

// 接收父组件传递的相册数据
const props = defineProps({
  albums: {
    type: Array,
    required: true,
  },
});
</script>

<style scoped>
.album-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 大屏幕：一行 4 个 */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto; /* 居中对齐 */
  padding: 20px;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .album-list {
    grid-template-columns: repeat(3, 1fr); /* 中屏幕：一行 3 个 */
  }
}

@media (max-width: 768px) {
  .album-list {
    grid-template-columns: repeat(2, 1fr); /* 小屏幕：一行 2 个 */
  }
}

@media (max-width: 480px) {
  .album-list {
    grid-template-columns: 1fr; /* 超小屏幕：一行 1 个 */
  }
}
</style>